<!-- home -->
<template>
  <page-view :full="true">
    <top-bar :title="title"
             :white="true">
    </top-bar>
    <page-content>
      <div class="bz-container">
        <div class="bz-header">
          <div class="bz-je">{{type == 1 ? user.xch : user.bzz}}</div>
        </div>

        <!-- 有数据 -->
        <van-skeleton title :row="4" :loading="initLoading" class="top-skeleton">
        <div class="bz-cbox">
            <p class="bz-swjl">财务记录</p>
            <div class="bz-con" v-for="(item, index) in list" :key="index">
              <div class="bz-name">
                <span class="bz-zc">{{status(item.type)}}</span>
                <!-- <span class="bz-color">审核中</span> -->
                <!-- <span class="bz-red bz-color">驳回</span>
            <span class="bz-green bz-color">已完成</span> -->
              </div>
              <p class="bz-bz">币种：{{item.currency == 0 ? 'BZZ':'XCH'}} </p>
              <div class="bz-count">
                <span>数量：{{item.price}}</span>
                <span class="bz-time">{{+(item.create_time+'000') | formatDate('yyyy-MM-dd hh:mm')}}</span>
              </div>
            </div>
            
            <!-- 无数据 -->
            <page-empty v-if="!list.length"></page-empty>
        </div>
        </van-skeleton>
        <van-button round
                    type="info"
                    class="bz-btn"
                    @click="goTransfer">转出</van-button>
      </div>
    </page-content>
  </page-view>
</template>

<script>
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import PageEmpty from '@/components/Empty';
import service from '@/utils/request';


export default {
  components: {
    TopBar,
    PageView,
    PageContent,
    PageEmpty
  },
  data () {
    return {
      title: '',
      user: {},
      list: [],
      page: 1,
      total: 0,
      initLoading: true,
      type: 0
    }
  },
  created (){
    this.type = +this.$route.params.type;
    this.user = this.$store.state.user;
    this.title = this.type == 1 ? 'XCH余额': 'BZZ余额';
  },
  mounted () {
    this.getData();
  },

  methods: {
    status(type){
      switch(type){
        case -1:
          return '转出';
        case 0:
          return '每日产出';
        case 1:
          return '转账驳回';
      }
    },
    getData(){
      return service.post('/apiBill.do', {
        currency: this.type,
        page: this.page,
        limit: 50,
        date: '',
        isExpend: 0
      }).then(res=>{
        this.initLoading = false;
        this.total = res.data.total;
        this.list = res.data.rows;
      })
    },
    goTransfer () {
      this.$router.push({ path: `/transfer/${this.type}` })
    }
  }
}
</script>
<style lang="scss" scoped>
.bz-container {
  width: 100vw;
  background: #f2f1f8;
  overflow: hidden;
  .bz-header {
    height: 164px;
    background: #585df9;
    overflow: hidden;
    .d-tit {
      width: 100%;
      text-align: center;
      position: relative;
      margin-top: 39px;
      // padding: 0 20px;
      .p-back {
        width: 22px;
        height: 22px;
        vertical-align: middle;
        position: absolute;
        left: 20px;
        top: 3px;
      }
      .p-center {
        width: auto;
        height: 28px;
        font-size: 20px;
        font-weight: 500;
        color: #ffffff;
        line-height: 28px;
        margin: 0 auto;
        vertical-align: middle;
        display: inline-block;
      }
    }
    .bz-je {
      text-align: center;
      height: 56px;
      font-size: 40px;
      font-weight: 600;
      color: #ffffff;
      line-height: 56px;
      margin-top: 80px;
    }
  }
  .er-none {
    height: auto;
    padding: 0 20px;
    margin-top: 30%;
    .er-imgn {
      width: 337px;
      height: 193px;
    }
    .er-np {
      height: 22px;
      font-size: 16px;
      margin-top: 10px;
      font-weight: 600;
      color: #7a7886;
      line-height: 22px;
      text-align: center;
    }
  }
  .bz-cbox {
    padding: 0 20px;
    padding-bottom: 70px;
    .bz-swjl {
      height: 22px;
      font-size: 16px;
      font-weight: 600;
      color: #3d3e54;
      line-height: 22px;
      margin: 13px 0;
    }
    .bz-con {
      height: 95px;
      background: #ffffff;
      border-radius: 6px;
      overflow: hidden;
      padding: 0 15px;
      margin-bottom: 10px;
      .bz-name {
        height: 25px;
        line-height: 25px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        .bz-zc {
          font-size: 18px;
          font-weight: 500;
          color: #3d3e54;
        }
        .bz-color {
          font-size: 12px;
          font-weight: 400;
          color: #585df9;
        }
        .bz-red {
          color: #e31010;
        }
        .bz-green {
          color: #5fd400;
        }
      }
      .bz-bz {
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #94949e;
        line-height: 20px;
        margin-top: 7px;
      }
      .bz-count {
        height: 20px;
        line-height: 20px;

        display: flex;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 400;
        color: #94949e;
        .bz-time {
          font-size: 12px;
        }
      }
    }
  }
  .bz-btn {
    width: 335px;
    height: 57px;
    line-height: 57px;
    background: #585df9;
    border-radius: 29px;
    text-align: center;
    font-weight: 500;
    color: #ffffff;
    margin: auto;
    left: 0;
    right: 0;
    position: fixed;
    bottom: 8px;
    font-size: 17px;
  }
}
</style>
